<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>欢迎来到购物</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.1.css">
    <link rel="stylesheet" href="css/car.css">
</head>
<body>
        <div id="head">
                <div class="head-con conment">
                    <div class="head-con-left">
                    <a href="#"><img src="images/12.png" alt="">
                        京东首页 (选择页面)</a>      
                      <ul>
                          <li><a href="#">京东购物页</a></li>
                          <li><a href="#">京东登录页</a></li>
                          <li><a href="#">京东注册页</a></li>
                          <li><a href="#">京东详情页</a></li>
                          <li><a href="#">我的购物车</a></li>
                          <li><a href="#">关于京东</a></li>      
                      </ul>          
                    </div>
                    <div class="head-con-right">
                        <div class="head-con-right-left">
                            <a href="login.html">你好,请登录</a>
                            <a href="reg.html">免费注册</a>
                        </div>
                        <ul>
                            <li class="bdr"><a href="#">我的订单</a></li>
                            <li class="bdr"><a href="#">我的京东
                                <i class="icon one"></i>
                            </a></li>
                            <li class="bdr"><a href="#">京东会员</a></li>
                            <li class="bdr"><a href="#">企业采购
                                <i class="icon one"></i>
                            </a></li>
                            <li class="bdr"><a href="#">客户服务
                                <i class="icon one"></i>
                            </a></li>
                            <li class="bdr"><a href="#">网站导航
                                <i class="icon one"></i>
                            </a></li>
                            <li class="bdr"><a href="#">手机京东</a></li>
                        </ul>
                    </div>
                </div>
    </div>
    <div class="page-header conment">
        <h1><img src="images/3.png" alt=""> &nbsp;购物车页面 &nbsp;<small>欢迎<span class="text-primary"></span>，<a href="javascript:;" class="btn btn-warning logout">退出</a></small></h1>
    </div>
    <div id="content">
        <div class="content-con conment">
            <table width="800">
                <thead>
                    <tr>
                        <th><input type="checkbox" class="all">全选</th>
                        <th>商品名称</th>
                        <th>商品图片</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                        <th>小计</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="checkbox" class="one"></td>
                        <td>XXX</td>
                        <td><img src="" width="50" height="50"></td>
                        <td>50</td>
                        <td>
                            <button class="jian">-</button>
                            <input type="number" name="number" value="1">
                            <button class="add">+</button>
                        </td>
                        <td>50</td>
                        <td><button class="remove">删除购物车</button></td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td><input type="checkbox" class="all">全选</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>商品总数量：<span class="totalNum">30</span></td>
                        <td>总计：<span class="totalPrice">500</span></td>
                    </tr>
                </tfoot>
            </table>
        </div>
        </div>
        <div id="bottom">
            <div class="bottom-con conment">
                    <h3>消费者权利声明:</h3>
                    <p>京东于2004年正式涉足电商领域，2019年，京东集团市场交易额超过2万亿元*。2019年7月，京东集团第四次入榜《财富》全球500强，位列第139位，是中国线上线下最大的零售集团。
            
                    2014年5月，京东集团在美国纳斯达克证券交易所正式挂牌上市，是中国第一个成功赴美上市的大型综合型电商平台。2015年7月，京东凭借高成长性入选纳斯达克100指数和纳斯达克100平均加权指数。
                            
                    2019年全年，京东集团净收入达5769亿元，归属于普通股股东的净利润达122亿元，创历史最高纪录；研发投入达179亿元，跃升为中国企业中对技术投入最多的公司之一。
                            
                    京东集团定位于“以供应链为基础的技术与服务企业”，目前业务已涉及零售、数字科技、物流、技术服务、健康、保险、物流地产、云计算、AI和海外等领域，其中核心业务为零售、数字科技、物流、技术服务四大板块。
                            
                    京东集团奉行客户为先 、诚信、 协作、 感恩 、拼搏 、担当的价值观，目标是成为全球最值得信赖的企业。</p>
            </div>
        </div>
</body>
<script src="js/cookie.js"></script>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    var usename = getCookie("usename");
if(usename){
    document.querySelector(".page-header small span").innerText = usename;
    document.querySelector(".page-header small a.logout").onclick = function(){
        removeCookie("usename");
        document.querySelector(".page-header small").innerHTML = `
            <a class="btn btn-info" href="login.html">登陆</a>
            <a class="btn btn-danger" href="reg.html">注册</a>
        `
        document.querySelector(".carNum").innerText=0;
    }
}else{
    document.querySelector(".page-header small").innerHTML = `
        <a class="btn btn-info" href="login.html">登陆</a>
        <a class="btn btn-danger" href="reg.html">注册</a>
    `
}
var data = localStorage.getItem("data");
if(!data || data=="[]"){
    $(".content").html("购物车空空如也，请先添加<a href='list.html'>去列表页添加</a>");
}else{
    data = JSON.parse(data);
    var arr = data.map(function(v){
        return v.id;
    });
    var ids = arr.join(",");
    $.ajax({
        url:"php/car.php",
        data:{
            ids:ids
        },
        type:"post",
        dataType:"json",
        success:function(res){
            if(res.status==200){
                res = res.data;
                var str = '';
                for(var i=0;i<res.length;i++){
                    var data1 = data.filter(function(v){
                        return v.id==res[i].id
                    });
                    var number = data1[0].number;
                    str += `
                        <tr data-id="${res[i].id}">
                            <td class="checkOne"><input type="checkbox" class="one"></td>
                            <td>${res[i].name}</td>
                            <td><img src="${res[i].imgpath}" width="50" height="50"></td>
                            <td>${res[i].price}</td>
                            <td>
                                <button class="jian">-</button>
                                <input type="number" name="number" value="${number}" data-stock="${res[i].stock}">
                                <button class="add">+</button>
                            </td>
                            <td>${res[i].price * number}</td>
                            <td><button class="remove">删除购物车</button></td>
                        </tr>
                    `
                }
                $("tbody").html(str);
                $(".all").click(function(){
                    if($(this).prop("checked")){
                        $(".one").prop("checked",true)
                        $(".all").prop("checked",true)
                    }else{
                        $(".one").prop("checked",false)
                        $(".all").prop("checked",false)
                    }
                    total();
                });
                $(".one").click(function(){
                    var xuan = Array.prototype.slice.call($(".one")).every(function(v){
                        return $(v).prop("checked");
                    });
                    if(xuan){
                        $(".all").prop("checked",true)
                    }else{
                        $(".all").prop("checked",false)
                    }
                    total();
                });
                $(".jian").click(function(){
                    $(this).next().val($(this).next().val()-0-1);
                    if($(this).next().val()-0<=1){
                        $(this).next().val(1)
                    }
                    var that = $(this);
                    var brr = data.find(function(v){
                        return v.id == that.parent().parent().attr("data-id");
                    });
                    brr.number = $(this).next().val()-0;
                    localStorage.setItem("data",JSON.stringify(data));
                    total();
                })
                $(".add").click(function(){
                    $(this).prev().val($(this).prev().val()-0+1);
                    var stock = $(this).prev().attr("data-stock")
                    if($(this).prev().val()-0>=stock){
                        $(this).prev().val(stock)
                    }
                    var that = $(this);
                    var brr = data.find(function(v){
                        return v.id == that.parent().parent().attr("data-id");
                    });
                    brr.number = $(this).prev().val()-0;
                    localStorage.setItem("data",JSON.stringify(data));
                    total();
                });
                total();
                $(".remove").click(function(){
                    var that = $(this);
                    var index = data.findIndex(function(v){
                        return v.id == that.parent().parent().attr("data-id");
                    });
                    data.splice(index,1);
                    localStorage.setItem("data",JSON.stringify(data));
                    $(this).parent().parent().remove();
                    if(data.length==0){
                        $(".content").html("购物车空空如也，请先添加<a href='list.html'>去列表页添加</a>");
                    }
                });
            }
        }
    });
}
function total(){
    var totalNum = 0;
    var totalPrice = 0;
    $("[name='number']").each(function(i,v){
        $(v).parent().next().text($(v).val() * $(v).parent().prev().text())
        if($(v).parent().siblings(".checkOne").children(".one").prop("checked")){
            totalNum += $(v).val()-0;
            totalPrice += $(v).parent().next().text()-0;
        }
    });
    $(".totalNum").text(totalNum);
    $(".totalPrice").text(totalPrice);
}
</script>
</html>